<script id="chatTemplate" type="text/template7">
    <div class="page navbar-fixed toolbar-fixed" data-page="chat">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left sliding">
                    <a href="#index" class="link icon-only back"><i class="icon icon-back"></i></a>
                </div>
                <div class="center">
                    {{nickName}}
                </div>
            </div>
        </div>
        <div class="toolbar messagebar">
            <div class="toolbar-inner">
                <a href="#" class="link"><i class="f7-icons">camera_fill</i></a><textarea placeholder="Message"></textarea><a href="#" class="link">发送</a>
            </div>
        </div>
        <div class="page-content messages-content">
            <div class="messages">
                <!-- Date stamp -->
                <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>

                <!-- Sent message (by default - green and on right side) -->
                <div class="message message-sent">
                    <!-- Bubble with text -->
                    <div class="message-text">Hello</div>
                </div>

                <!-- Another sent message -->
                <div class="message message-sent">
                    <!-- Bubble with text -->
                    <div class="message-text">How are you?</div>
                </div>

                <!-- Received message (by default - grey on left side) -->
                <div class="message message-with-avatar message-received">
                    <!-- Sender name -->
                    <div class="message-name">Kate</div>

                    <!-- Bubble with text -->
                    <div class="message-text">I am fine, thanks</div>

                    <!-- Sender avatar -->
                    <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
                </div>

                <!-- Another date stamp -->
                <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>

                <!-- Sent message with image -->
                <div class="message message-pic message-sent">
                    <!-- Bubble with image -->
                    <div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
                    <!-- Message label -->
                    <div class="message-label">Delivered 2 days ago</div>
                </div>

                <!-- Sent message with single message date -->
                <div class="message message-sent">
                    <!-- Bubble with text -->
                    <div class="message-text">
                        How are you?
                        <div class="message-date">Nov 11, 2016</div>
                    </div>
                    <!-- Message label -->
                    <div class="message-label">Delivered 2 days ago</div>
                </div>
            </div>
        </div>
    </div>
</script>